﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Navigation</title>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
    <!-- Template styles -->
    <link href="../../../common.css" rel="stylesheet" />
    <link href="navigation.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="navigation.js"></script>
    <script type="text/javascript" src="ContextualMenu.js"></script>
</head>
<body class="ms-font-l ms-navigation">
    <main class="ms-navigation__main">
        <div class="ms-navigation__header">
            <button class="ms-Button ms-Button--command" id="myButton">
                <span class="ms-Button-icon"><i class="ms-CommandBarItem-icon ms-Icon ms-Icon--menu"></i></span>
            </button>
            <ul class="ms-ContextualMenu" id="myDropdown">
                <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Page 1</a></li>
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link ms-ContextualMenu-link--hasMenu" href="#">Page 2</a> <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--chevronDown"></i>
                    <ul class="ms-ContextualMenu">
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 2.1</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 2.2</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link is-selected" href="#">Page 2.3</a>
                        </li>
                    </ul>
                </li>
                <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Page 3</a></li>
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link ms-ContextualMenu-link--hasMenu" href="#">Page 4</a> <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--chevronDown"></i>
                    <ul class="ms-ContextualMenu">
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 4.1</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 4.2</a>
                        </li>
                    </ul>
                </li>
                <li class="ms-ContextualMenu-item ">
                    <a class="ms-ContextualMenu-link" href="#">
                        <span class="ms-Icon ms-Icon--gear"></span> Settings
                    </a>
                </li>
                <li class="ms-ContextualMenu-item ">
                    <a class="ms-ContextualMenu-link" href="#">
                        <span class="ms-Icon ms-Icon--sites"></span> Sign-out
                    </a>
                </li>
            </ul>
        </div>
        <section class="ms-navigation__content ms-font-m ms-fontColor-neutralPrimary">
            <div class="ms-font-xl ms-navigation__content__title">Page Title</div>
            <div class="ms-font-l ms-fontWeight-light ms-navigation__content__subtitle">Subtitle</div>
            <div class="ms-font-m ms-navigation__content__text">Body text</div>
            <ul class="ms-font-m">
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </section>
    </main>
    <footer class="ms-navigation__footer ms-bgColor-themePrimary">
        <div class="ms-navigation__footer--left">
            <img src="/assets/logo-filled.png" />
            <h1 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-white">My Add-in Name</h1>
        </div>
    </footer>
</body>
</html>
